<template>
    <div class="project-count-card" :style="{ backgroundColor: bgColor }">
        <!-- 标题组件 -->
        <Title :title="title"></Title>

        <!-- 工程总数显示 -->
        <div class="project-count-content">
            <div class="total-count">
                <span class="count-number">{{ engineerCount }}</span>
                <span class="count-label">工程总数</span>
            </div>

            <!-- 图表容器（保留以备后用） -->
            <div ref="chartContainer" style="height: 10px;"></div>
        </div>
    </div>
</template>

<script>
import { get } from '@/utils/request';

export default {
    props: {
        // 允许父组件自定义背景颜色
        bgColor: {
            type: String,
            default: '#d0ffcc'
        },
        // 允许自定义标题
        title: {
            type: String,
            default: '工程统计'
        }
    },
    data() {
        return {
            deviceData: {
        total: 0
      },
      engineerCount: 0
        };
    },
    created() {
    // 调用获取工程总数的方法
    this.fetchEngineerCount()
  },
    methods: {
        // 获取工程数据
        async fetchEngineerCount() {
      try {
        // 发起 HTTP GET 请求，使用分页查询接口获取工程总数，当前页码为 1，每页显示 10 条记录
        const res = await get('/engineer/pageQuery', {
          page: 1,
          pageSize: 10
        });
        // 在控制台打印工程总数的响应信息，用于调试
        console.log('工程总数响应:', res); 
        // 检查响应是否存在且包含数据
        if (res && res.data) {
          // 根据接口文档，分页查询应返回 total 字段，将其赋值给 engineerCount，若不存在则为 0
          this.engineerCount = res.data.total || 0;
        }
      } catch (error) {
        // 若请求出错，在控制台打印错误信息
        console.error('获取工程总数失败:', error);
        // 假设 $message 是 Vue 项目中使用的消息提示组件，显示错误提示信息
        this.$message.error('获取工程总数失败');
      }
    }
    }
};
</script>

<style lang="less" scoped>
.project-count-card {
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;

    &:hover {
        box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
        transform: translateY(-2px);
    }

    .project-count-content {
        margin-top: 15px;
        text-align: center;

        .total-count {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 120px;

            .count-number {
                font-size: 48px;
                font-weight: bold;
                color: #1890ff;
                line-height: 1;
            }

            .count-label {
                margin-top: 10px;
                font-size: 16px;
                color: #666;
            }
        }
    }
}
</style>